<template>
  <div class="exam-bank-footer">
    <div class="btn-review" @click="review">
      <div class="checkbox" :class="{ 'checked': reviewCheck}"></div>
      <div class="text">Review</div>
    </div>
    <div class="pager">
      <vue-scroll :ops="ops" id="pager-wrapper">
        <div class="scroller">
          <div class="part" v-for="(item,index) in dataList" :key="index">
            <div class="title">Part {{index+1}}:</div>
            <div :id="`item${index}${index2}`" class="item" @click="clickItem(index,index2)"
              :class="{ 'mark': reviewCheck && (index == itemIndex && index2 == itemIndex2),'selected': (index == itemIndex && index2 == itemIndex2)}"
              v-for="(item2,index2) in item.children" :key="index2">{{index2+1}} </div>
          </div>
        </div>
      </vue-scroll>
    </div>
    <div class="btn-arrow">
      <div class="btn" @click="clickArrow('left')">
        <div class="btn-inner left"></div>
      </div>
      <div class="btn" @click="clickArrow('right')">
        <div class="btn-inner right"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import vueScroll from "vuescroll";
  export default {
    name: 'examfooter',
    data() {
      return {
        reviewCheck: false,
        itemIndex: 0,
        itemIndex2: 0,
        dataList: [{
          children: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
        }, {
          children: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
        }, {
          children: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
        }, {
          children: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
        }],
        ops: {
          vueScroll: {},
          scrollPanel: {},
          rail: {},
          bar: {
            size: '6px',
            background: '#999'
          }
        }
      }
    },
    components: {
      vueScroll
    },
    methods: {
      clickItem(index, index2) {
        this.itemIndex = index;
        this.itemIndex2 = index2;
        let targetbox = document.getElementById(`item${index}${index2}`);
        document.getElementsByClassName('__panel')[0].scrollLeft = targetbox.offsetLeft - 150;
        this.$emit('changeIndex');
      },
      clickArrow(arrow) {
        if (arrow == 'right') {
          if (this.itemIndex == 3 && this.itemIndex2 == 9) {
            return false;
          }
          if (this.itemIndex2 == 9) {
            this.itemIndex++;
            this.itemIndex2 = 0;
          } else {
            this.itemIndex2++;
          }
        }
        if (arrow == 'left') {
          if (this.itemIndex == 0 && this.itemIndex2 == 0) {
            return false;
          }
          if (this.itemIndex2 == 0) {
            this.itemIndex--;
            this.itemIndex2 = 9;
          } else {
            this.itemIndex2--;
          }
        }
        this.clickItem(this.itemIndex, this.itemIndex2);
      },
      review() {
        this.reviewCheck = !this.reviewCheck;
      }
    }
  }

</script>

<style lang="less">
  .exam-bank-footer {
    justify-content: space-between;
    align-items: center;
    width: 95%;
    min-height: 3.54167rem !important;
    margin-top: .52083rem;
    margin-bottom: 10px;
    flex-basis: 3.54167rem;
    flex-shrink: 1;

    .btn-review {
      display: flex;
      flex-direction: column;
      width: 5.3125rem;
      height: 3.54167rem;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .checkbox {
      width: .88542rem;
      height: .88542rem;
      background: url() 50% no-repeat;
      background-size: 100% 100%;
    }

    .checkbox.checked {
      background: url() no-repeat;
      background-size: cover;
    }

    .text {
      font-size: .83333rem;
      color: #000;
      height: 1.25rem;
      line-height: 1.25rem;
      text-align: center;
      margin-top: .20833rem;
    }
  }

  .exam-bank-footer,
  .exam-popup__footer {
    display: flex;
    flex-direction: row;
    height: 3.54167rem;
  }

  .exam-bank-footer .pager .scroller,
  .exam-bank-footer .pager {
    position: relative;
    display: flex;
    justify-content: flex-start;
  }

  .exam-bank-footer .pager {
    height: 3.07292rem;
    overflow: hidden;
    flex-direction: row;
    flex: 2;
    background: #e6ecf7;
    box-shadow: 0 1px 3px 1px #9da1aa;
    border-radius: 8px;
    padding-right: .52083rem;
  }

  .exam-bank-footer .pager .scroller {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 5px 0;
  }

  .exam-bank-footer .pager .part {
    display: flex;
    flex-direction: row;
    padding-left: 1.25rem;
  }

  .exam-bank-footer .pager .part .title {
    min-width: 3rem;
    height: 1.82292rem;
    line-height: 1.82292rem;
    font-size: .83333rem;
    font-weight: 700;
    color: #3a3a3b;
  }

  .exam-bank-footer .pager .part .item:hover {
    background: #2464c5;
  }

  .exam-bank-footer .pager .part .item.selected {
    background: #bbdbf4;
  }

  .exam-bank-footer .pager .part .item {
    width: 1.82292rem;
    height: 1.82292rem;
    line-height: 1.82292rem;
    margin-left: .57292rem;
    text-align: center;
    vertical-align: middle;
    background: #565656;
    color: #fff;
    border-radius: .20833rem;
    cursor: pointer;
  }

  .exam-bank-footer .pager .part .item.mark {
    border-radius: 50%;
  }

  .exam-bank-footer .btn-arrow {
    display: flex;
    flex-direction: row;
    width: 6.09375rem;
    height: 3.07292rem;
    margin-left: 4.42708rem;
    align-items: center;
    justify-content: space-between;
  }

  .exam-bank-footer .btn-arrow .btn:active {
    background: #2464c5;
    border: 3px solid #99c2fa;
    border-radius: 4px;
  }

  .exam-bank-footer .btn-arrow .btn:hover {
    background: #ededed;
    border: 3px solid #99c2fa;
    border-radius: 4px;
  }

  .exam-bank-footer .btn-arrow .btn {
    width: 3.07292rem;
    height: 3.07292rem;
    background: transparent;
    vertical-align: center;
    border: 3px solid transparent;
  }

  .exam-bank-footer .btn-arrow .btn .btn-inner.left {
    background: url() 50% no-repeat;
    background-size: 100% 100%;
  }

  .exam-bank-footer .btn-arrow .btn .btn-inner {
    width: 2.91667rem;
    height: 2.91667rem;
    background: #ededed;
    border-radius: 50%;
  }

  .exam-bank-footer .btn-arrow .btn .btn-inner.right {
    background: url() 50% no-repeat;
    background-size: 100% 100%;
  }

</style>
